<template>
    <div>            
        <article>
            <h3>智库建设情况</h3>
            <a-row :gutter="24">
                <a-col :md="24" :lg="24" :xl="12">
                    <section>
                        <div class="flex-between">
                            <h3><i class="iconfont icon-a-paiming1"></i>资料入库情况(单位：份)</h3>
                            <div class="btn-line">
                                <a-button type="primary" @click="toReportWork('/thinkTank/index')">                                    
                                    更多<a-icon type="more" class="more"/>
                                </a-button>
                            </div>
                        </div>                                  
                        <div class="table-box">
                            <a-table
                                :columns="projectColumns"
                                :data-source="projectData"                                
                                :loading="projectLoading"
                                :pagination="false"
                                rowKey='realname'
                            >
                                <span slot="rank" slot-scope="text, record, index" :class="{'active-rank': ((projectPagination.current - 1) * pageSize + parseInt(index) + 1) < 4}">
                                    {{ (projectPagination.current - 1) * pageSize + parseInt(index) + 1 }}                                            
                                </span>
                            </a-table>
                            <a-pagination v-if="projectData.length > 0"
                                size="small"
                                :pageSize="projectPagination.pageSize"
                                v-model="projectPagination.current"
                                :hideOnSinglePage="true"
                                :total="projectPagination.total"
                                @change="(value) => onChangepage(value)"
                            >
                            </a-pagination>
                        </div>    
                    </section>
                </a-col>
                <a-col :md="24" :lg="24" :xl="12">
                    <section class="type-line">
                        <h3><i class="iconfont icon-biao1"></i>智库资源数量(单位：份)</h3>
                        <div class="flex-between">
                            <div>
                                <div v-for="item of resLeftList" :key="item.value" class="progress-line">
                                    <span class="title" :title="item.name">{{item.name}}</span>                                    
                                    <span class="line"></span>
                                    <span>{{item.num}}</span>
                                </div>
                            </div>
                            <div>
                                <div v-for="item of resRightList" :key="item.value" :class="['progress-line', {'progress-child' : item.child}]">
                                    <div v-if="item.child">
                                        <div class="title top-tlt" :title="item.name">{{item.name}}:</div>
                                        <div v-for="chi of item.child" :key="chi.value" class="progress-line">
                                            <span class="title" :title="chi.name">{{chi.name}}</span>                                            
                                            <span class="line"></span>
                                            <span>{{chi.num}}</span>    
                                        </div>
                                    </div>
                                    <template v-else>
                                        <span class="title" :title="item.name">{{item.name}}</span>
                                        <span class="line"></span>
                                        <span>{{item.num}}</span>    
                                    </template>                                    
                                </div>
                            </div>
                        </div>
                    </section>
                </a-col>
            </a-row>
        </article>
    </div>
</template>
<script>
import {getAction, postAction} from '@/api/manage'
export default {
    components: {
        
    },
    data () {
        return {
            projectColumns:[
                {
                    title: '序号',
                    dataIndex: 'rank',
                    key: 'rank',
                    width: 60,
                    align: 'center',
                    scopedSlots: { customRender: 'rank' },
                },
                {title: '姓名',dataIndex: 'realname',width: '15%',align:'left',ellipsis: true},
                {title: '技术库',dataIndex: 'techNum',width:'14%',align:'left',ellipsis: true},
                {title: '产品库',dataIndex: 'productNum',width:'14%',align:'left',ellipsis: true},
                {title: '半成品库',dataIndex: 'productHalfNum',width:'14%',align:'left',ellipsis: true},                
                {title: '政策资源库',dataIndex: 'policyNum',width:'14%',align:'left',ellipsis: true},
                {title: '图书馆',dataIndex: 'technologyNum',width:'14%',align:'left',ellipsis: true},   
                {title: '汇总',dataIndex: 'allNum',width:'14%',align:'left',ellipsis: true},             
            ],
            projectData:[],
            pageSize: 10,
            projectPagination:{
                total:0,
                current:1,
                pageSize: 10,
            },
            projectLoading: false,
            // 
            resLeftList: [
                {name: '科研技术库', value:'techNum', num: 0, count: 0,  percentTol: '20', percent: '', },
                {name: '工程技术库', value:'engineeTechNum', num: 0, count: 0,  percentTol: '40', percent: ''},
                {name: '产品信息库', value:'productNum', num: 0, count: 0,  percentTol: '20', percent: '',},                
                {name: '半成品库', value:'productHalfNum', num: 0, count: 0,  percentTol: '20', percent: ''},
                {name: '科技人才库', value:'techPersonnelNum', num: 0, count: 0,  percentTol: '20', percent: '',},   
                {name: '公司信息库', value:'companyNum', num: 0, count: 0,  percentTol: '20', percent: '',},
                {name: '政策资源库', value:'policyNum', num: 0, count: 0,  percentTol: '20', percent: '',},
                {name: '烹饪库预约单数', value:'cookAppointNum', num: 0, count: 0,  percentTol: '20', percent: '',},
                {name: '知识产权库', value:'knowBrandNum', num: 0, count: 0,  percentTol: '20', percent: '',},                                                
                {name: '科技图书馆', value:'technologyNum', num: 0, count: 0,  percentTol: '20', percent: '',},            
            ],
            resRightList: [                                                
                {name: '科技实验室',  value:'labDevice',child: [
                    {name: '实验室数量', value: 'labNum', num: 0, count: 0,  percentTol: '20', percent: '',},
                    {name: '设备数量', value: 'labDeviceNum', num: 0, count: 0,  percentTol: '20', percent: '',},
                    {name: '预约单数', value: 'labDeviceAppointNum', num: 0, count: 0,  percentTol: '100', percent: '',}
                ]},
                {name: '食品合规评估', value:'food', child: [
                    {name: '规则数量', value: 'foodReportIndicatorNum', num: 0, count: 0,  percentTol: '80', percent: '',},
                    {name: '报告数量', value: 'foodReportNum', num: 0, count: 0,  percentTol: '20', percent: '',}
                ]},
            ],
        }
    },
    created(){
    },
    mounted () {
        this.getProjectData()
        this.getLibReportData()
    },
    methods: {
        getProjectData(){
            this.projectLoading=true;
            postAction('/reportHome/techProductlibFileReport',{
                current: this.projectPagination.current,
                size: 10
            }).then(res=>{
                this.projectLoading=false;
                if(res.code==200 && res.result){
                    this.projectData = res.result.records;                    
                    this.projectPagination.total = res.result.total;
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
            })
        },
        onChangepage(current) {       
            this.projectPagination.current = current
            this.getProjectData();  
        },
        getLibReportData(){
            getAction('/reportHome/libReport').then(res=>{                
                if(res.code==200 && res.result){
                    this.resLeftList.forEach(item =>{
                        item.num = res.result[item.value]
                        item.percent = res.result[item.value + 'MonthAddPrecent'] || '0.00'
                    })
                    this.resRightList.forEach(item =>{
                        item.num = res.result[item.value]
                        item.percent = res.result[item.value + 'MonthAddPrecent'] || '0.00'
                        if(item.child){
                            item.child.forEach(child =>{
                                child.num = res.result[child.value]
                                child.percent = res.result[child.value + 'MonthAddPrecent'] || '0.00'
                            })
                        }
                    })
                }else{
                    this.$message.warning('加载数据异常：'+res.message);
                }
            })
        },
        toReportWork(url){
            let routeUrl = this.$router.resolve({
                path: url,
            });
            window.open(routeUrl.href, '_blank');
        },
    }
}
</script>
<style lang="less" scoped>
@import 'home.less';
.page-main article >h3{margin-bottom: 8px;}
section.type-line{padding: 14px 20px 20px;
    .flex-between{align-items: flex-start;margin-right:-20px;
        >div{flex: 1;margin-top: 10px;
            &:first-of-type{
                .progress-line{padding: 12px 0;}                
            }
        }
    }    
    .progress-line{display: flex;color: #c7cceb;padding: 14px 0;justify-content: center;align-items:center;
        >span{width: 30%;
            &:last-of-type{padding-left: 20px;}
        }
        .title{width: 35%;text-align: right;margin-right: 20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
            &.top-tlt{padding-top: 15px;width: 100%;text-align: left;padding-left: 25px;}
        }        
        &.progress-child{display: inline-block;width: 100%;padding: 0;
            >div{border: 1px solid #fbbb5d;margin: 15px 20px 20px;}            
        }
        .line{width: 20%;background-color: #fbbb5d;display: inline-block;height: 3px;}
    }
}
/deep/ .ant-row .ant-col{margin: 12px 0;}
</style>